<template>
  <div class="order-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品订单</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-input placeholder="请输入订单号查询" v-model="searchText" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="searchOrder"></el-button>
      </el-input>
      <!-- 商品列表 -->
      <el-table :data="tableData" border style="width: 100%" class="goodsTable">
        <!-- 索引列非Id -->
        <el-table-column prop="" label="#" width="50" type="index">
        </el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="120">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="120">
        </el-table-column>
        <el-table-column prop="order_isPay" label="是否支付" width="120">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.order_isPay">已付款</el-tag>
            <el-tag type="danger" v-else>未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="order_userName" label="收货人" width="120">
        </el-table-column>
        <el-table-column prop="order_userTel" label="电话" width="200">
        </el-table-column>
        <el-table-column prop="order_address" label="收货地址">
        </el-table-column>
        <el-table-column prop="order_isSend" label="是否发货" width="80">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.order_isSend">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="下单时间" width="200">
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="editOrderAddr(scope.row)" type="success" icon="el-icon-edit" circle></el-button>
            <el-button @click="orderInfo(scope.row)" type="info" icon="el-icon-truck" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="total" class="fy" :page-size="pageSize" @current-change='changeCurrent'>
      </el-pagination>
      <!-- 编辑地址对话框 -->
      <el-dialog title="修改收货地址" :visible.sync="editDialog.dialogVisible" width="30%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="省市区/县" prop="city">
            <!-- 城市数据 -->
            <el-cascader :options='cityData' v-model="ruleForm.city">
            </el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="addr">
            <el-input v-model="ruleForm.addr"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelEdit">取 消</el-button>
          <el-button type="primary" @click="changeAddr">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 物流对话框 -->
      <el-dialog title="修改发货状态" :visible.sync="infoDialog.dialogVisible" width="30%">
        <el-form ref="sendState" :model="sendState" label-width="80px">
          <el-form-item label="发货状态">
            <el-select v-model="sendState.isSend" placeholder="请选择发货状态">
              <el-option label="未发货" value="0"></el-option>
              <el-option label="已发货" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="infoDialog.dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="changeSendState">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 引入城市分类数据
import cityData from './citydata.js'
export default {
  name: 'OrderCom',
  data() {
    return {
      searchText: '',
      tableData: [],
      // 查询项
      currentPage: 1,
      pageSize: 5,
      total: 0,
      // 编辑对话框
      editDialog: {
        dialogVisible: false
      },
      editId: 0,
      // 物流对话框
      infoDialog: {
        dialogVisible: false
      },
      // 地址修改
      ruleForm: {
        city: [],
        addr: ''
      },
      // 规则
      rules: {
        addr: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        city: [{ required: true, message: '请选择城市', trigger: 'change' }]
      },
      cityData,
      // 发货状态
      sendState: {
        isSend: ''
      }
    }
  },
  methods: {
    // 取消编辑
    cancelEdit() {
      // 清空表单数据
      this.$refs.ruleForm.resetFields()
      this.editDialog.dialogVisible = false
    },
    // 提交修改发货状态
    async changeSendState() {
      const newSendState = parseInt(this.sendState.isSend)
      const { data: rel } = await this.$http.put(`order/${this.editId}`, {
        newSendState
      })
      if (rel.code === 20000) {
        this.$message({
          message: '修改状态成功',
          type: 'success'
        })
        this.orderInit()
      } else {
        this.$message.error('修改失败')
      }
      this.infoDialog.dialogVisible = false
    },
    // 提交修改
    changeAddr() {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) {
          this.$message.error('未填写完整信息，修改失败')
          return false
        }
        // 处理数据
        const city = this.ruleForm.city
        let newAddress = ''
        city.forEach(item => {
          newAddress += item
        })
        newAddress += this.ruleForm.addr
        // 发送请求
        const { data: rel } = await this.$http.put(`order/${this.editId}`, { newAddress })
        if (rel.code === 20000) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.orderInit()
        } else {
          this.$message.error('修改失败')
        }
        this.editDialog.dialogVisible = false
      })
    },
    editOrderAddr(row) {
      console.log(row.id)
      this.editId = row.id
      this.ruleForm.city = []
      this.ruleForm.addr = ''
      this.editDialog.dialogVisible = true
    },
    orderInfo(row) {
      console.log(row.id)
      this.editId = row.id
      this.infoDialog.dialogVisible = true
      // 重置表单
      this.sendState.isSend = '请选择发货状态'
    },
    async orderInit() {
      const { data: rel } = await this.$http.get(`order?currentPage=${this.currentPage}&pageSize=${this.pageSize}`)
      if (rel.code === 20000) {
        this.tableData = rel.data.rows
        this.total = rel.data.count
      } else {
        this.$message.error('获取商品列表失败')
      }
    },
    // 页码变化
    changeCurrent(val) {
      this.currentPage = val
      this.orderInit()
    },
    // 搜索
    async searchOrder() {
      const { data: rel } = await this.$http.get(`searchOrder?number=${this.searchText}`)
      this.tableData = rel.data
    }
  },
  created() {
    this.orderInit()
  }
}
</script>

<style scoped>
.box-card {
  margin-top: 20px;
}
.input-with-select {
  width: 500px !important;
  margin-bottom: 20px;
}
.fy {
  margin-top: 20px;
}
.el-cascader {
  width: 100%;
}
</style>
